import React, { PureComponent } from 'react';
import * as echarts from 'echarts';

class DailyTransactionBar extends PureComponent {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chart = null;
  }

  componentDidMount() {
    this.initChart();
  }

  componentDidUpdate() {
    this.updateChart();
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }

  initChart = () => {
    try {
      const chartDom = this.chartRef.current;
      this.chart = echarts.init(chartDom);
      this.updateChart();
    } catch (error) {
      console.error('条形图初始化失败:', error);
    }
  };

  updateChart = () => {
    if (!this.chart || !this.props.data) return;

    const { categories, series } = this.props.data;
    
    // 定义不同颜色
    const colors = ['#ff6b9d', '#ffd700', '#ffd700', '#00d4ff', '#ff6b9d', '#00ffff'];
    
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '15%',
        right: '15%',
        bottom: '10%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        max: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 12,
          margin: 8
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params) {
          return `${params.name}<br/>交易量: ${params.value}%`;
        }
      },
      series: [
        {
          name: '交易量',
          type: 'bar',
          data: series[0].data.map((value, index) => ({
            value: value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: colors[index] },
                { offset: 1, color: colors[index] + '80' }
              ]),
              borderRadius: [0, 8, 8, 0],
              shadowColor: colors[index],
              shadowBlur: 10
            }
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowOffsetX: 5,
              shadowColor: 'rgba(255, 255, 255, 0.3)'
            }
          },
          barWidth: '60%',
          // 添加数值标签
          label: {
            show: true,
            position: 'right',
            color: '#ffffff',
            fontSize: 12,
            formatter: '{c}%'
          },
          // 添加动画效果
          animationDuration: 2000,
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 200;
          }
        }
      ]
    };

    this.chart.setOption(option, true);

    // 添加鼠标悬停效果
    this.chart.on('mouseover', (params) => {
      this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });

    this.chart.on('mouseout', (params) => {
      this.chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });
  };

  render() {
    return (
      <div 
        ref={this.chartRef} 
        style={{ 
          width: '100%', 
          height: 'calc(100% - 0.4rem)',
          minHeight: '1.0rem'
        }}
      />
    );
  }
}

export default DailyTransactionBar; 